<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>index</title>
</head>
<body>
<div id="app">
    <div v-if="token.access_token">
        <h1>账号已登录，获取当前登录用户信息:</h1>
        <div style="color: blue">
            <h4>accessToken:</h4>
            <p>{{token.access_token}} </p>
            <h4>refresh_token:</h4>
            <p>{{token.refresh_token}} </p>
            <h4>id_token:</h4>
            <p>{{token.id_token}}</p>
        </div>
        <button onclick="logoutSSO()">退出SSO</button>
        <button onclick="logout()">退出Client</button>
    </div>
    <div v-else>
        <a :href="authorizationCodeEndpoint">授权码模式登录，点击将用户导向authorization endpoint</a> <br>
        <a :href="implicitEndpoint">隐式流程模式登录，点击将用户导向authorization endpoint</a>
    </div>
</div>
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/vue/2.6.11/vue.min.js"></script>
<script>
    function logoutSSO() {
        window.location.href = "http://localhost:8080/auth/realms/springdemo/protocol/openid-connect/logout?" +
            "redirect_uri=http://localhost:9090/index.html";
    }

    function logout() {
        window.location.href = "/dapeng/logout"
    }

    new Vue({
        el: "#app",
        data: {
            authorizationCodeEndpoint: "http://localhost:8080/auth/realms/springdemo/protocol/openid-connect/auth" +
                "?response_type=code" +
                "&client_id=pc" +
                "&redirect_uri=http://localhost:9090/dapeng/callback" +
                "&login=true&scope=openid",
            implicitEndpoint: "http://localhost:8080/auth/realms/springdemo/protocol/openid-connect/auth" +
                "?response_type=token" +
                "&client_id=pc" +
                "&redirect_uri=http://localhost:9090/index.html" +
                "&login=true&scope=openid&nonce=123",
            token: {},
        },
        created: function () {
            let _this = this;
            $.get("/users/current", function (data) {
                _this.token = data;
            });
        }
    })
</script>
</body>
</html>
